<!-- file menus -->
<script> 
	
	$(function(){
		/* external function */
		$.fn.fmatter.editBtn = function(cellval, opts) {
			return "<button class='editBtn' data-id='"+cellval+"' >Ubah</button>";
		};
		
		$.fn.fmatter.deleteBtn = function(cellval, opts) {
			return "<button class='deleteBtn' data-id='"+cellval+"' >Hapus</button>";
		};
		
		$.fn.serializeObject = function()
		{
		   var o = {};
		   var a = this.serializeArray();
		   $.each(a, function() {
			   if (o[this.name]) {
				   if (!o[this.name].push) {
					   o[this.name] = [o[this.name]];
				   }
				   o[this.name].push(this.value || '');
			   } else {
				   o[this.name] = this.value || '';
			   }
		   });
		   return o;
		};
		
		/* declarisasi */
		
		task_menus = $("#task_menus");
		grid_menus = $("#grid-menus");
		pgrid_menus = $("#pgrid-menus");
		btnadd_menus = $("#btn-add-menus");
		btncancel_menus =  $("#btn-cancel-menus");
		btnsave_menus = $("#btn-save-menus");
		form_menus = $("#form-menus");
		
		field_menus_id = $("#menus_id");
		field_menus_label = $("#menus_label");
		field_menus_kode = $("#menus_kode");
		field_menus_double = $("#menus_double");
		field_menus_icon = $("#menus_icon");
		field_menus_color = $("#menus_color");
		field_menus_url = $("#menus_url");
		
		/* method started */
		
		$( "input[type=submit],input[type=button],input[type=reset], button" ).button();
			
		/* make component */
		
		grid_menus.jqGrid({ 
			ajaxGridOptions : {type:"POST"},
			serializeGridData : function(postdata) {return postdata; },
			postData : {task : 'LIST'},
            url: 'c_menus',
			datatype: "json", 
			colNames:[
				'menus_label',
				'menus_kode',
				'menus_double',
				'menus_icon',
				'menus_color',
				'menus_url',
				'','','menus_id'],
			colModel:[
				{ name: 'menus_label'  ,index: 'menus_label' , search : true},
				{ name: 'menus_kode'  ,index: 'menus_kode' , search : true},
				{ name: 'menus_double'  ,index: 'menus_double' , search : true},
				{ name: 'menus_icon'  ,index: 'menus_icon' , search : true},
				{ name: 'menus_color'  ,index: 'menus_color' , search : true},
				{ name: 'menus_url'  ,index: 'menus_url' , search : true},
				{ name: 'menus_id' ,index: 'menus_id', width: '75' , search : false, formatter : 'editBtn' },
				{ name: 'menus_id'  ,index: 'menus_id',  width: '75', search : false, formatter : 'deleteBtn'},
				{ name: 'menus_id'  ,index: 'menus_id',key: true, hidden: true , search : false}
			],
			width: '700',
			height: 'auto',
			rowNum:10, 
			rowList:[10,20,30], 
			pager: '#pgrid-menus', 
			sortname: 'menus_id', 
			viewrecords: true, 
			sortorder: "desc",
			caption:"" ,
			loadComplete : function(){
				$( "input[type=submit],input[type=button], button" ).button();
			
				editBtn = $(".editBtn");
				deleteBtn = $(".deleteBtn");
			
				editBtn.click(function(){
					task_menus.val("UPDATE");
					var data = $(this).data();
					dataRow = grid_menus.getRowData(data.id);
					field_menus_id.val(dataRow.menus_id);
					field_menus_label.val(dataRow.menus_label);
					field_menus_kode.val(dataRow.menus_kode);
					field_menus_double.val(dataRow.menus_double);
					field_menus_icon.val(dataRow.menus_icon);
					field_menus_color.val(dataRow.menus_color);
					field_menus_url.val(dataRow.menus_url);
					form_menus.dialog("open");
				});
				
				deleteBtn.click(function(){
					confr = confirm("Apa Anda yakin menghapus data ini?");
					if (confr){
						var data = $(this).data();
						$.ajax({
							type: 'POST',
							url: 'c_menus',
							data: {menus_id: data.id, task : 'DELETE'},
							success: function(response){
								if(response==1){
									grid_menus.trigger('reloadGrid');
									$("#grid-menus").trigger('reloadGrid');
								}
							}
						});
					}
				});
			}
		}); 
		grid_menus.jqGrid('navGrid','#pgrid-menus',{edit:false,add:false,del:false,search:false});
		grid_menus.jqGrid('filterToolbar',{});
		
		form_menus.dialog({
			autoOpen: false,
			height: "auto",
			width: "auto",
			modal: true
		});
		
		/* event */
		
		btnadd_menus.click(function(){
			task_menus.val("INSERT");
			form_menus.dialog("open");
		});
		
		btncancel_menus.click(function(){
			form_menus.dialog("close");
		});
		
		btnsave_menus.click(function(){
			data = form_menus.serializeObject();
			$.ajax({
				url : "c_menus",
				data : data,
				type : 'POST'
			}).done(function(response){
				grid_menus.trigger('reloadGrid');
				btncancel_menus.click();
			});
		});
		
	});
</script>

	<table id="grid-menus" class="table table-striped table-bordered" ></table>
	<div id="pgrid-menus"></div>
	
	<button id="btn-add-menus">Tambah</button>
	
	<form id="form-menus" title="menus" disabled=true>
		<input type="hidden" value="INSERT" name="task" id="task_menus">
	   <table>
			<tr style="display: none">
				<td align="right">menus_id:</td>
				<td align="left"><input id="menus_id" name="menus_id" /></td>
			</tr>
			
			<tr > <td align="right">menus_label:</td> <td align="left"><input id="menus_label" name="menus_label" /></td> </tr>
			<tr > <td align="right">menus_kode:</td> <td align="left"><input id="menus_kode" name="menus_kode" /></td> </tr>
			<tr > <td align="right">menus_double:</td> <td align="left"><input id="menus_double" name="menus_double" /></td> </tr>
			<tr > <td align="right">menus_icon:</td> <td align="left"><input id="menus_icon" name="menus_icon" /></td> </tr>
			<tr > <td align="right">menus_color:</td> <td align="left"><input id="menus_color" name="menus_color" /></td> </tr>
			<tr > <td align="right">menus_url:</td> <td align="left"><input id="menus_url" name="menus_url" /></td> </tr>
			
			<tr>
				<td align="right"></td>
				<td style="padding-top: 10px;" align="right">
					<input style="margin-right: 5px;" type="button" id="btn-save-menus" value="Save"  />
					<input id="btn-cancel-menus" type="reset" value="Cancel" /></td>
			</tr>
		</table>
	</form>